<template>
    <!--index.wxml-->
    <view class="allPage">
        <view class="content">

            <view class="status">
                <text class="b"> {{json.orderStatusStr || ''  }}</text>
            </view>
              

            <view class="parts">
                <view class="line">
                   
                    <view class="l">
                        <text class="b">下单人</text>
                    </view>
                    <view class="r none">
                        <text>{{ json.placeOrderUser.mobile}}</text>
                        <text v-if="json.placeOrderUser.mobile" @click="$takePhone(json.placeOrderUser.mobile)" class="iconfont icon-dianhua col-green ml10 f36"></text>
                    </view>
                </view>
                <view class="line">
                    <view class="l">
                        <text class="b">预定时间</text>
                    </view>
                    <view class="r none">
                        <text class="col">{{appointDate}}</text>
                    </view>
                </view>
                <view class="sendAddress">
                  
                    <view class="">
                        <text class="">{{json.placeOrderUser.roomNumber}}</text>
                    </view>
                    <text>{{json.villageModel.name}} (<text class="col-hui">{{json.villageModel.address}}</text>)</text>
                
                </view> 
            </view>
              
            <view class="selectList ">

               
                <view class="sec_item ul parts">

                    <view class="head-tit">
                        <text >商品信息</text>
                    </view>
                

                    <view class="li" v-for=" goodsItem,idx in json.orderGoodsModelList" :key='goodsItem.id'>
                        <view class="p productBox" @click="goDetail( item )">
                            <view class="imgs">
                                <image :src="goodsItem.listPictureSrc" mode="aspectFit" :lazy-load="true"></image>
                            </view>
                            <view class="info">
                                <view class="info-l">
                                    <view class="name text-delic2">
                                        <text class="">
                                            {{ goodsItem.goodsName }}
                                        </text>
                                    </view>
                                    <view class="bottom">

                                        <view class="nums">
                                            <text>
                                                x {{goodsItem.goodsNum  }}
                                            </text>
                                        </view>

                                    </view>
                                </view>
                                <view class="info-r">
                                    <view class="price">
                                        <text class="min">￥</text> {{ goodsItem.payMoney }}
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="priceBox text-right">
                        <text class="min">合计实付:</text><text class="b col-red"> <text class="min">￥</text>{{json.orderMoney }}</text>
                    </view>
                </view>
               

            </view>

            <view class="parts">
                <view class="head-tit">
                        <text >订单信息</text>
                    </view>

                <view class="line">
                   
                    <view class="l">
                        <text class="">下单时间</text>
                    </view>
                    <view class="r none">
                        <text>{{ json.createTime}}</text>
                    </view>
                </view>
                <view class="line">
                   
                   <view class="l">
                       <text class="">订单编号</text>
                   </view>
                   <view class="r none">
                       <text>{{ json.orderNumber}}</text>
                   </view>
               </view>

                <view class="line" v-if="json.dispatcherId">

                    <view class="l">
                        <text class="">配送人员</text>
                    </view>
                    <view class="r none">
                        <text>{{ json.dispatcherUser.mobile}}</text>

                        <text @click="$takePhone(json.dispatcherUser.mobile)" class="iconfont icon-dianhua col-green ml10 f36"></text>

                    </view>
                </view>
             
            </view>
           
        </view>

            
        <view class="commonFoot" v-if=" json.orderStatus == 8 || json.orderStatus == 10 ">
            <view class="foot-btn-box fixed">
                <!-- v-if=" json.orderStatus == 8 " -->
                <view class="foot-btn" @click="goReceiving"  v-if=" json.orderStatus == 8 " >
                    <text>点击开始配货</text>
                </view>
                 <!-- v-if=" json.orderStatus == 10 " -->
                <view class="foot-btn green" v-if=" json.orderStatus == 10" @click="goFinish">
                    <text>点击配货完成</text>
                </view>
            </view>
        </view>

    </view>
</template>
<script>
import { statusList ,DealOrderInfo } from '../../utils/configDIct.js'
import {parseTime} from '../../utils/tools'
import Process from '../../utils/process'
const app = getApp();
export default {
    components: { },
    data () {
        return {
            orderId:'',
            json:{
                placeOrderUser:{},
                orderGoodsModelList:[],
                dispatcherUser:{},
                villageModel:{},
                flashSupermarketModel:{}
            },
           
            statusList:statusList,
            appointDate:''
        }
    },
    computed:{

    },
   
    onLoad( option ){
        // console.log('999999999999999',this.wechatInfo)
        this.orderId = option.id
        this.initPage()
    },
    mounted () {

    },
    methods: {
        initPage( cb ){

            this.$axios({url:'flash/supermarket/order/get?loading',data: this.orderId})
                .then( res =>{

                    this.json = DealOrderInfo( [res.data] ,this.statusList )[0]
                    // console.log('999999999999999',res)

                    this.appointDate = this.appointDateFunc( res.data )

                    cb && cb()

                }) 

        },
        //格式化预约时间
        appointDateFunc( json ){

            let appointDay = new Date( json.dispatcherEndTime ).getDate();
            let today = new Date().getDate();

            let str = '';

            // console.log('1231231212222', appointDay , today )

            if( appointDay == today ){
                str = '今日 '
            }
            else if( appointDay == (today + 1) ){
                str = '明天 '
            } 
            else if( appointDay == (today + 2) ){
                str = '后天 '
            }
            else{
                str = json.dispatcherEndTime.split(' ')[0]
            }

            str += parseTime(json.dispatcherStartTime , '{h}:{i}' )+ ' - '+ parseTime(json.dispatcherEndTime , '{h}:{i}' ) 

            return str 

        },
        //下拉刷新
        onPullDownRefresh () {

            this.initPage(()=>{
                uni.stopPullDownRefresh();//停止刷新
            })

        },
        //开始配货
        goReceiving () {


            let that = this

            uni.showModal({
                title: '温馨提示',
                content: '确定是否开始配货？',
                confirmText: "开始配货",
                cancelText: "取消",
                success: function(res) {
                    if (res.confirm) {

                        // console.log('配送开始了。。。。。。。。。。。。。。。。。。。。。。。。。。。')
                        Process.shopReceiving( that.json.id  )
                            .then( res =>{

                                // console.log('开始配货了', res )

                                uni.showToast({title:'开始配货'})

                                that.initPage()

                            })

                    }
                }
            })

        
        },
        //配货完成
        goFinish () {

            let that = this

            uni.showModal({
                title: '温馨提示',
                content: '确定配货是否已完成？',
                confirmText: "配货完成",
                cancelText: "取消",
                success: function(res) {
                    if (res.confirm) {

                        // console.log('配送开始了。。。。。。。。。。。。。。。。。。。。。。。。。。。')
                        Process.shopFinish( that.json.id  )
                            .then( res =>{

                                console.log('开始配货了', res )

                                uni.showToast({title:'配货完成'})

                                that.initPage()

                            })

                    }
                }
            })

        }
    
    }
}
</script>
<style lang="scss" scoped>
.content{
    padding: 30rpx 32rpx;
    .parts {
        padding: 30rpx 30rpx 30rpx;
    }
    .status{
        min-height: 52rpx;
        font-size: 40rpx;
        margin-bottom: 30rpx;
    }
    .head-tit{
        font-weight: bold;
        color: #000;
        font-size: 28rpx;
        margin-bottom: 20rpx;
    }
    .line {
        color: #565656;
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 10rpx 0;
        .l {
            text-align: left;
            margin-left: 10px;
            max-width: 500rpx;
            min-width: 160rpx;
        }
        .r {
            flex: 1;
            width: 100%;
            // border-bottom: 1rpx solid #f1f1f1;
            // padding-bottom: 20rpx;
            &.none {
                border: none;
            }
        }
        .b {
            // font-weight: bold;
        }
        .min {
            font-size: 24rpx;
        }
        ::v-deep .holderClass {
            color: #c1c1c1;
        }
        .icon {
            color: #c1c1c1;
            font-size: 24rpx;
            line-height: 38rpx;
        }
        .address {
            font-size: 22rpx;
            color: #565656;
        }
    }
    .sendAddress{
        font-size: 24rpx;
        color: #000;
        padding-top: 30rpx;
        margin-top: 30rpx;
        border-top: 1rpx solid #f6f6f6;
        line-height: 1.5;
    }
    .priceBox {
        padding: 0 32rpx 10rpx;
        font-size: 34rpx;
        .min {
            font-size: 24rpx;
        }
    }
}
// 商品
.sec_item {
    padding-top: 28rpx;
    .li {
        padding: 10rpx 32rpx;
    }
    // border-bottom: 1px solid #f1f1f1;

    .productBox {
        display: flex;
        .imgs {
            margin-right: 20rpx;
            image {
                width: 100rpx;
                height: 100rpx;
                background: #f1f1fe;
            }
        }
        .info {
            display: flex;
            width: 100%;
            .info-l {
                flex: 1;
            }
            .info-r {
                text-align: right;
                min-width: 150rpx;
                margin-left: 10rx;
                font-size: 30rpx;
                .min {
                    font-size: 22rpx;
                }
            }
            .name {
                font-size: 26rpx;
                color: #000;
                font-weight: bold;
            }
            .bottom {
                // padding-top: 10rpx;
                overflow: hidden;
                .nums {
                    float: left;
                    color: #888;
                    font-size: 26rpx;
                    margin: 6rpx 0;
                    // .old-price {
                    //     margin-left: 10rpx;
                    //     text-decoration: line-through;
                    // }
                    // .col-red {
                    //     font-size: 30rpx;
                    // }
                    // .mini {
                    //     font-size: 26rpx;
                    // }
                }
                .buy-btn {
                    margin: 6rpx 0;
                    float: right;
                    min-width: 140rpx;
                    text-align: right;
                }
            }
        }
    }
}
</style>